<template>
  <div class="exercise">
    <div class="dropdown">
      <!-- 索引栏 -->
      <div class="drop">
        <!-- <van-row class="dropdown" type="flex" justify="center">
        <van-col span="8"> -->
        <!-- <span>jjj</span> -->
        <van-dropdown-menu class="drop-content">
          <van-dropdown-item ref="closeDrop" v-model="value1" :title="title">
            <van-index-bar>
              <van-index-anchor
                v-for="(item, index) in citys"
                :key="index"
                :index="index"
              >
                <p class="cityIndex">{{ index }}</p>
                <van-cell
                  v-for="(item2, index2) in item"
                  @click="chooseCity(item2)"
                  :key="index2"
                  :title="item2"
                />
              </van-index-anchor>
            </van-index-bar>
          </van-dropdown-item>
        </van-dropdown-menu>
        <!-- </van-col> -->
        <!-- </van-row> -->
      </div>
    </div>
    <!-- 标签栏 -->
    <van-tabs class="tabs" @click="onClick">
      <van-tab
        v-for="item in cityPositions[cCity]"
        :title="item.name"
        :key="item.id"
        :name="item.id"
      >
      </van-tab>
    </van-tabs>
    <!-- 题库 -->
    <div class="tiku">
      <span class="left">
        <div>
          <div style="text-align:center;">
            <van-icon name="column" color="#FF4949" />
          </div>
          <span>常错题库</span>
        </div>
        <div>
          <div style="text-align:center">
            <van-icon name="printer" color="#1DC779" />
          </div>
          <span>企业题库</span>
        </div>
      </span>
      <span>
        <div class="center">
          <p class="center-sort">顺序刷题</p>
          <van-circle
            v-model="currentRate"
            :rate="currentTotal"
            :speed="100"
            :text="text"
            color="#F28BA3"
            fill="#FA5980"
            ><span class="center-count">
              <template>
                <countTo
                  :startVal="startVal"
                  :endVal="currentTotal"
                  :duration="2000"
                ></countTo>
              </template>
              /
              <template>
                <countTo
                  :startVal="startVal"
                  :endVal="totalCount"
                  :duration="2000"
                ></countTo>
              </template>
            </span>
          </van-circle>
        </div>
      </span>
      <span class="left">
        <div>
          <div style="text-align:center">
            <van-icon name="checked" color="#FFDA05" />
          </div>
          <span>常错题库</span>
        </div>
        <div>
          <div style="text-align:center">
            <van-icon name="todo-list-o" color="#1989fa" />
          </div>
          <span>企业题库</span>
        </div>
      </span>
    </div>
    <!-- 累计收录 -->
    <div class="shoulu">
      <p>累计收录</p>
      <span>
        <template>
          <countTo
            :startVal="startVal"
            :endVal="totalCount"
            :duration="2000"
          ></countTo>
        </template>
      </span>
    </div>
    <!-- 按钮 -->
    <div class="button">
      <van-button type="info" @click="toInterview" size="large"
        >模拟面试</van-button
      >
    </div>
  </div>
</template>

<script>
import { interviewsFilterApi } from '@/api/exercise'
import countTo from 'vue-count-to'
import { mapState } from 'vuex'
export default {
  name: 'exercise',
  components: { countTo },
  data () {
    return {
      value1: 0, // 下拉第一个
      // option1: [{ text: '北京', value: 1 }],
      citys: [], //城市集合
      cityPositions: [], // 城市对应的集合
      currentRate: 0,
      cCity: '', // 选中的城市
      startVal: 0,
      currentTotal: 0, // 当前已做题目数量
      totalCount: 0, // 累计收录
      typeId: '' //职业类型id
    }
  },
  computed: {
    totalCountAll () {
      return +this.totalCount
    },
    text () {
      // return this.currentRate.toFixed(0) + '%'
      return 29 + '/' + this.totalCount
    },
    title () {
      return this.cCity
    },
    total () {
      return setInterval(() => {}, interval)
    },
    // 用户信息
    ...mapState(['Userlist'])
  },
  methods: {
    // 模拟面试筛选
    async interviewsFilter () {
      const res = await interviewsFilterApi()
      // console.log(res)
      // 所有城市
      this.citys = res.data.data.citys
      // console.log(this.citys)
      // this.option1 = res.data.data.citys[0]
      // 城市集合
      this.cityPositions = res.data.data.cityPositions
      // 初始化时保存职业类型id
      this.typeId = this.cityPositions[this.cCity][0].id
      // 累计收录
      this.totalCount = res.data.data.totalCount
      // console.log(this.totalCount);
      //  console.log(this.cityPositions);
      this.currentTotal = this.Userlist.submitNum
    },

    chooseCity (value) {
      this.cCity = value
      // console.log(this.cCity);
      // 关闭城市下拉框
      this.$refs.closeDrop.toggle()
    },
    // 去往答题页
    toInterview () {
      // this.onClick()
      this.$router.push(`/interview/${this.typeId}/${this.cCity}`)
    },
    onClick (id, title) {
      // console.log(id,title);
      this.typeId = id
      // console.log(this.typeId)
    }
  },
  created () {
    this.interviewsFilter()
    this.cCity = '全国'
  }
}
</script>

<style lang="less">
.exercise {
  .dropdown {
  }
  background-color: #f7f4f5;
  .dropdown {
    background-color: #fff;
  }
  .van-index-anchor {
    padding: 0px;
  }
  .cityIndex {
    background-color: #f7f4f5;
    line-height: 25px;
    padding: 0px;
    margin: 0px;
    padding-left: 16px;
  }
  .tabs {
    margin-top: 7px;
  }
  .tiku {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 210px;
    background-color: #fff;
    margin: 15px 0 15px 0;
    span {
      flex: 1;
      height: 200px;
      .center {
        position: relative;
        text-align: center;
        padding-top: 50px;
        .center-sort {
          position: absolute;
          transform: translate(50%, 50%);
          top: 60px;
          width: 60px;
          left: 0.03333rem;
          font-size: 14px;
          z-index: 10;
          color: #fff;
        }
        .van-circle__text {
          margin-top: 15px;
          color: #fff;
        }
      }
      .center-count {
        position: absolute;
        top: 55px;
        left: 0.53467rem;
        // z-index: 10;
        font-size: 14px;
        color: #fff;
      }
    }
    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      div {
        flex: 1;
        padding-top: 10px;
      }
      span {
        font-size: 12px;
      }
      .van-icon {
        font-size: 40px;
      }
    }
  }
  // 收录
  .shoulu {
    height: 150px;
    background-color: #fff;
    // line-height: 150px;
    text-align: center;
    p {
      font-size: 16px;
      font-weight: 600;
      padding: 20px 0 15px 0;
    }
    span {
      font-size: 36px;
      font-weight: 700;
      padding-top: 50px;
    }
  }
  .button {
    margin: 20px 12px;
    .van-button--info {
      border-radius: 5px;
    }
  }
}
</style>
